<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<style>
  .left {
    width: 220px;
    height: 100%;
    color: #fff;
    background-color: #323A52;
    position: fixed;
    top: 0;
    left: 0;
  }

  .left h3 {
    margin-left: 20px;
    font-family: Roboto, sans-serif;
  }

  .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #000000;
  }

  .menu li {
    position: relative;
  }

  .menu a {
    text-decoration: none;
    display: block;
    color: #fff;
    padding: 20px 20px;
  }

  .menu .main-menu:hover {
    background-color: #4B5571;
    border-bottom: 1px solid #e5e5e5;
  }

  /* 子菜单 样式
  .submenu {
    display: none;
    border: 1px solid #e5e5e5;
  }

  .menu li:hover .submenu {
    display: block;
  }

   */

  .submenu li {
    padding: 10px 20px;
  }

  #current {
    background-color: dodgerblue;
  }

  .submenu a {
    padding: 5px 20px;
    margin-left: 10px;
  }

  .submenu a {
    display: flex;
  }

  .submenu li:hover {
    background-color: #4B5571;
  }

  .icon {
    width: 24px;
    height: auto;
    margin-right: 15px;
    vertical-align: middle;
    align-self: center;
  }

</style>

<div class="left">
  <h3>天天向上后台管理</h3>

  <div class="menu">
    <ul>
      <li>
        <a href="javaScript:void(0)" class="main-menu" onclick="showManage('user')">
          <img src="./assets/images/用户（白色）.png" alt="" class="icon">用户管理</a>
      </li>
      <li>
        <a href="javaScript:void(0)" class="main-menu" onclick="showManage('course')">
          <img src="./assets/images/课程白.png" alt="" class="icon">课程管理</a>
      </li>
      <li>
        <a href="javaScript:void(0)" class="main-menu" onclick="showManage('material')">
          <img src="./assets/images/文件-白.png" alt="" class="icon">资料管理</a>
      </li>
      <li>
        <a href="javaScript:void(0)" class="main-menu" onclick="showManage('exam')">
          <img src="./assets/images/考试-白.png" alt="" class="icon">考试管理</a>
      </li>
      <li>
        <a href="javaScript:void(0)" class="main-menu" onclick="showManage('comment')">
          <img src="./assets/images/评论-白.png" alt="" class="icon">评论管理</a>
      </li>
    </ul>
  </div>

  <script>
    window.onload = function () {
      const manage = document.getElementById('mainFrame')
      manage.src = 'manager/user.jsp'
      const menus = document.querySelectorAll('.main-menu')
      menus[0].id = 'current'
    }

    function showManage(value) {
      const manage = document.getElementById('mainFrame')
      const menus = document.querySelectorAll('.main-menu')
      menus.forEach(function (menu) {
        menu.id = ''
      })
      event.target.id = 'current'

      switch (value) {
        case 'user':
          manage.src = 'manager/user.jsp'
          break
        case 'course':
          manage.src = 'manager/course.jsp'
          break
        case'material':
          manage.src = 'manager/material.jsp'
          break
        case 'exam':
          manage.src = 'manager/exam.jsp'
          break
        case 'comment':
          manage.src = 'manager/comment.jsp'
          break
        default:
          break
      }
    }
  </script>

</div>

